<template>
    <div >
        <a-card title="查看商品">
            <div class="goods-name">{{ formState.name }}</div>
            <div class="price">{{ formState.price! / 100 }}元/{{ formState.unit }}</div>
            <div class="preview-img">
                <UploadImg v-model:list="formState.imgList" :onlyLook="true"></UploadImg>
            </div>
            <div class="ql-editor" v-html="formState.remark"></div>
            <div class="bottom-div" >
                <a-button @click="close" size="large">返回</a-button>
            </div>
        </a-card>

    </div>
</template>
<script setup lang="ts">
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { ref, h, onMounted, onActivated } from 'vue'
import detail, { type DetailType } from '@/components/myList/detail.vue';

import uploadImg from '@/components/uploadImg.vue'

import { useRouter } from "vue-router"
import { useTabStore } from '@/stores/tab'
import type { Goods } from '@/types/Goods'


import { useGoodsStore } from '@/stores/goods'
import UploadImg from '@/components/uploadImg.vue';
const goodsStore = useGoodsStore()
const tabStore = useTabStore()
const router = useRouter()
const formState = ref<Goods>({})
const formRef = ref()
const lookVisible = ref(false)
const lookData = ref<{ lng: number, lat: number, title: string }>()
const data = ref<DetailType[]>([])

const close = () => {
    router.back()
    tabStore.removeTab(router.currentRoute.value.fullPath)
}


onMounted(() => {
    formState.value = goodsStore.updateGoods

})
</script>
<style scoped>
.goods-name{
    
    text-align: center;
    font-size: 30px;
}
.bottom-div {
    padding: 30px 0;
    text-align: center;
}
.preview-img{
    padding: 0 0 30px 0;
    text-align: center;
}
.price{
    padding: 30px 0;
    text-align: center;
    color: red;
}
</style>